<template>
	<view class="home-page">
		<z-paging ref="paging" v-model="homeData" @query="queryList" show-refresher-update-time>
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<template #top>
				<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
				<PickerComp @selectData="getPickerData"></PickerComp>
			</template>
			<view class="list">
				<view v-for="item in homeData" @click="goShopPage(item)" :key="item.id"
					class="pl-30 pr-30 pt-58 flex f-row-nowrap f-ai-center" style="height:130rpx">
					<image :src="item.avatar" style="width:130rpx;height:130rpx;" />
					<view class="flex-1 ml-20 grid border-bottom" style="grid-template: 64rpx 62rpx / 1fr auto;">
						<view class="fs-30 mt-12 cfs-333 ellipsis-1" style="width: 80%;">{{ item.title }}</view>
						<view class="g-js-end tag">
							<block v-for="(itemY, y) in item.tag" :key="y">
								<text v-if="itemY === '点'" class="fs-16 pl-8 pr-8 pt-8 pb-8 mr-10 cbg-fdf5da cfs-eda241">点</text>
								<text v-else-if="itemY === '预'" class="fs-16 pl-8 pr-8 pt-8 pb-8 mr-10 cbg-fceeeb cfs-dc6b56">预</text>
								<text v-else-if="itemY === '堂'" class="fs-16 pl-8 pr-8 pt-8 pb-8 mr-10 cbg-e2ecf8 cfs-7fa7d8">堂</text>
							</block>
						</view>
						<view class="fs-22 cfs-666"><text>{{ item.desc }}</text><text>{{ item.location }}</text></view>
						<view class="fs-22 cfs-666 g-js-end">{{ formatDistance(item.distance) }}</view>
					</view>
				</view>
			</view>
		</z-paging>


	</view>
</template>

<script>
import { fetchHomeData } from '@/apis/home'
import { obj2Str } from '@/utils/share'
import PickerComp from './PickerComp.vue'
export default {
	name: 'HomePage',
	components: { PickerComp },
	data() {
		return {
			homeData: [],
			queryObj: {
				distanceOrder: '',
				tag: ''
			}

		}
	},
	computed: {
		formatTagClass(v) {
			console.log('v', v)
			return '12'
		}
	},
	created() { },
	methods: {
		queryList(pageNo, pageSize) {
			const params = { pageNumber: pageNo, pageSize: pageSize }
			if (this.queryObj.distanceOrder) params.distanceOrder = this.queryObj.distanceOrder
			if (this.queryObj.tag) params.tag = this.queryObj.tag
			fetchHomeData(params).then(res => {
				this.$refs.paging.complete(res);
			}).catch(res => {
				this.$refs.paging.complete(false);
			})
		},
		formatDistance(v) {
			return v < 1000 ? parseInt(v) + '米' : parseInt(v / 1000) + '千米'
		},
		getPickerData(obj) {
			this.queryObj.distanceOrder = obj.distance === '离我最近' ? 'asc' : ''
			this.queryObj.tag = obj.tag === '堂食' ? '堂' : obj.tag === '点外卖' ? '点' : obj.tag === '提前预约' ? '预' : ''
			console.log('this.queryObj', this.queryObj)
			this.$refs.paging.reload()



		},
		goShopPage(item) {
			console.log('item', item)
			uni.navigateTo({ url: '/pages/shop/shop' + obj2Str({ name: item.title }) })

		}

	}
}
</script>

<style lang="scss">
.home-page {
	.tag {
		text {
			&:last-child {
				margin-right: 0;

			}
		}
	}
}
</style>
